<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html ng-app="kitkatApp">
  <head>
    <jsp:include page="../common/commonHead.jsp"/> 
    <link rel="stylesheet" href="lib/css/edit.css">
    <title>KITKAT一个神奇的html5制作工具</title>
  </head>
  <body ng-controller="PageListCtrl" onselectstart ='return false' ng-init="loading=true">
    <div class="loadingForEdit" ng-if="loading==true">
	       <div class="wraper">
			      <div class="spinner">
					 <div class="double-bounce1"></div>
  					 <div class="double-bounce2"></div>
					 <div class="loadingText">loading......</div>
				  </div>
		  </div>
	 </div> 
    <header>
        <span>KITKAT</span>
        <div class="tools">
            <div class="tool addText" ng-click="addText()"></div>
            <div class="tool addImage" ng-click="showPictureStore('all')"></div>
        </div>
    </header>
    <div id="content" projectId="${projectId}">
        <div id="leftframe" class="col-xs-2">
            <div class="pagesContent">
                <ul class="pages" scroll sortable>
                    <li id="{{thumbpage.pageId}}" class="page" ng-click="choosePage(thumbpage.pageId)" ng-class="{'active':thumbpage.pageId==selectedPageId,'notactive':thumbpage.pageId!=selectedPageId}" ng-repeat="thumbpage in pages | orderBy : 'index'">
                            <div class="paper">
                                <div id="thumb_{{thumbpage.pageId}}" class="thumb_page" ng-style="thumbpage.backstyle">
                                  <img ng-src="{{thumbpage.backImg.src}}" class="backImg" ng-style="thumbpage.backImg.style"/>
                                  <div ng-repeat="ele in thumbpage.eles" ng-style="ele.style">
                                  <img ng-if="ele.type=='img'" ng-src="{{ele.src}}" class="elements" style="top:0px;left:0px;border-radius:{{ele.style.borderRadius}}px;"/>
                                  {{ele.content}}</div>
                                </div> 
                            </div>
                            <div class="uparraw" ng-click="upPage(thumbpage,$event)"></div>
                            <div class="number">{{thumbpage.index}}</div>
                            <div class="downarraw" ng-click="downPage(thumbpage,$event)"></div>
                    </li>    
                </ul>
                <div id="addPageBtn" ng-click="addPage()">+</div>
            </div> 
        </div>
        <div id="centerframe" elemenu backmenu class="col-xs-7" ng-click="centerEventHandle($event)">
            <div id="canvas">
                <div id="pageWrap">
                    <div id="{{page.pageId}}" ng-style="page.backstyle">
                        <img ng-src="{{page.backImg.src}}" class="backImg" ng-style="page.backImg.style"/>
                        <div edit id="{{ele.id}}" ng-mousedown="mousedown(ele.id,$event)" ng-style="ele.style" ng-repeat="ele in page.eles" class="{{ele.entrance}}">
                           <img ng-if="ele.type=='img'" ng-src="{{ele.src}}" class="elements" style="top:0px;left:0px;border-radius:{{ele.style.borderRadius}}px;"/>
                           <div class="elements" ng-class="{'selectedStyle':ele.id==selectEle.id}"></div>
                           {{ele.content}}
                        </div>
                        <div class="gridContent" ng-if="useGrid == true">
                           <div class="gridItemHor" style="left:75px"></div>
                           <div class="gridItemHor" style="left:150px"></div>
                           <div class="gridItemHor" style="left:225px"></div>
                           <div class="gridItemVer" style="top:117.5px"></div>
                           <div class="gridItemVer" style="top:235px"></div>
                           <div class="gridItemVer" style="top:352.5px"></div>
                        </div>
                    </div> 
                </div>
            </div>
            
            <div class="operatePage" ng-init="useGrid = false">
                <div class="grid" ng-class="{'gridActive':useGrid == true}" ng-click="useGridOrNot()"></div>
                <div class="copyPage" ng-click="copyPage()"></div>
                <div class="delePage" ng-click="delePage()"></div>
            </div>
        </div>
        <div id="rightFrame" class="col-xs-3" ng-init="selectEle.tagName='bg'">
            <!-- 修改背景-->
            <div ng-if="selectEle.tagName=='bg'" class="bgControl">
            	 <div class="title">背景</div>
            	 <div class="content" scroll>
                     <div class="editPanel">
                         <div class="col-xs-12">
                             <button class="btn btn-warning" ng-click="showPictureStore('backImg')">更换背景</button>
                             <button class="btn btn-danger" ng-click="removeBackImg()">移除</button>
                         </div> 
                         <div class="col-xs-12">
	                	 	 <div class="backimgWrap" ng-style="page.backstyle">
	                              <img jcrop src="{{page.backImg.src}}"/>     
	                         </div>
                         </div>
                         <div class="col-xs-12">
                           <label class="col-xs-3">主题颜色</label>
                               <div class="col-xs-4 InputColorContent">
                                    <div type="text" class="form-control InputColor" ng-click="showBackColorPanel()" style="background:{{page.backstyle.background}};"></div>
                                    <div class="colorPicker" ng-class="{'showColorPicker':showBackColorPicker==true}">
                                        <div>
                                           <div style="background:{{color.color}}" ng-repeat="color in colors" ng-click="chooseBackColor(color.color)">
                                              {{color.content}}
                                           </div>
                                        </div>
                                    </div>
                               </div>
                         </div>
                         <div class="col-xs-12">
                               <label class="col-xs-2">透明</label>
                               <div class="col-xs-6 sliderContent">
                                   <div slider type="backImgopacity" class="line" style="left:{{page.backImg.style.opacity*120}};"></div>
                                   <div class="slider"></div>
                               </div>
                               <div class="col-xs-4">
                                    <input type="text" class="form-control" ng-model="page.backImg.style.opacity"/>       
                               </div>
                         </div>
                         <!-- <div class="col-xs-12">
                               <label class="col-xs-4">进入效果</label>
                               <div class="col-xs-4">
                                   <select ng-model="page.entrance" ng-change="changePageEntranceAnimation()" ng-options="animateEntranceAction.actionClass as animateEntranceAction.actionName for animateEntranceAction in animateEntranceActions"></select> 
                               </div>
                         </div>
                         <div class="col-xs-12">
                               <label class="col-xs-4">离开效果</label>
                               <div class="col-xs-4">
                                   <select ng-model="page.exit" ng-change="changePageExitAnimation()" ng-options="animateExitAction.actionClass as animateExitAction.actionName for animateExitAction in animateExitActions"></select> 
                               </div>
                         </div> -->
                         <div class="col-xs-12">
                              <button class="btn btn-success" ng-click="saveProject()">保存项目</button>
                              <!-- <button class="btn btn-success" ng-click="reviewProject()">预览项目</button> -->
                         </div>
                         <div class="col-xs-12">
                            <label>快拿起手机欣赏你的作品</label>
                            <div qcode url="http://192.168.1.100:8080/kitkat/showPage.do?projectId=${projectId}"></div>
                         </div>
                	 </div>
                 </div>
            </div>
            <div ng-if="selectEle.tagName=='text' || selectEle.tagName=='img'" class="bgControl">
            	 <div class="title">
                    <div class="col-xs-6" ng-click="editType('text')" ng-class="{titleSelected:editAttr=='text'}" ng-if="selectEle.tagName=='text'">文本</div>
                    <div class="col-xs-6" ng-click="editType('text')" ng-class="{titleSelected:editAttr=='text'}" ng-if="selectEle.tagName=='img'">图片</div>
                    <div class="col-xs-6" ng-click="editType('action')" ng-class="{titleSelected:editAttr=='action'}">动作</div>
                 </div>
            	 <div class="content" scroll>
            	 	 <!-- 文本,图片 -->
            	 	 <div ng-if="editAttr=='text'" class="editPanel">
            	 	       <!-- 更换图片 -->
            	 	       <div class="col-xs-12" ng-if="selectEle.tagName=='img'">
                             <button class="btn btn-warning" ng-click="showPictureStore('eleImg')">更换图片</button>
                           </div>
	                       <div class="col-xs-12" ng-if="selectEle.tagName=='img'">
		                	 <div class = "eleimgWrap">
		                         <img ng-src="{{selectEle.ele.src}}" style="width:100%"/>     
		                     </div>
	                       </div>
            	 	       <!-- 更换图片 -->
            	 	       <!--文本内容 -->
            	 	       <div class="col-xs-12" ng-if="selectEle.tagName=='text'">
	        	 	 	  	   <label>文本内容</label>
	        	 	 	  	   <textarea ng-model="selectEle.ele.content"></textarea>       	
                           </div>
        	 	 	  	   <!--文字，字号-->
        	 	 	  	   <div class="col-xs-12" ng-if="selectEle.tagName=='text'">
        	 	 	  	   	   <label class="col-xs-2">文字</label>
        	 	 	  	   	   <div class="col-xs-4 InputColorContent">
        	 	 	  	   	        <div type="text" class="form-control InputColor" ng-click="showTextColorPanel()" style="background:{{selectEle.ele.style.color}};"></div>
                                    <div class="colorPicker" ng-class="{'showColorPicker':showTextColorPicker==true}">
                                        <div>
                                           <div style="background:{{color.color}}" ng-repeat="color in colors" ng-click="chooseTextColor(color.color)">
                                               {{color.content}}
                                           </div>
                                        </div>
                                    </div>
        	 	 	  	   	   </div>
        	 	 	  	   	   <label class="col-xs-2">字号</label>
        	 	 	  	   	   <div class="col-xs-4">
                                    <select ng-model="selectEle.ele.style.fontSize" style="width:100%;" ng-options="fontSize.id as fontSize.size for fontSize in fontSizes">
                                    </select>      	 	 	  	   	        
        	 	 	  	   	   </div>
        	 	 	  	   </div>
        	 	 	  	   <!-- 风格 -->
        	 	 	  	   <div class="col-xs-12" ng-if="selectEle.tagName=='text'">
        	 	 	  	   	   <label class="col-xs-2">风格</label>
        	 	 	  	   	   <div class="col-xs-3 fontStyle" ng-class="{'fontStyleSelected':selectEle.ele.style.fontWeight=='bolder'}" ng-click="toggleFontWeight()">B</div>
        	 	 	  	   	   <div class="col-xs-3 fontStyle" ng-class="{'fontStyleSelected':selectEle.ele.style.textDecoration=='underline'}" ng-click="toggleTextDecor()">U</div>
        	 	 	  	   	   <div class="col-xs-3 fontStyle" ng-class="{'fontStyleSelected':selectEle.ele.style.fontStyle=='italic'}" ng-click="toggleFontStyle()">I</div>
        	 	 	  	   </div>
        	 	 	  	   <!--背景，行距-->
        	 	 	  	   <div class="col-xs-12" ng-if="selectEle.tagName=='text'">
        	 	 	  	   	   <label class="col-xs-2">背景</label>
                               <div class="col-xs-4 InputColorContent">
                                    <div type="text" class="form-control InputColor" ng-click="showBackEleColorPanel()" style="background:{{selectEle.ele.style.background}};"></div>
                                    <div class="colorPicker" ng-class="{'showColorPicker':showBackEleColorPicker==true}">
                                        <div>
                                           <div style="background:{{color.color}}" ng-repeat="color in colors" ng-click="chooseBackEleColor(color.color)">
                                              {{color.content}}
                                           </div>
                                        </div>
                                    </div>
                               </div>
        	 	 	  	   	   <label class="col-xs-2">行距</label>
        	 	 	  	   	   <div class="col-xs-4">
                                    <select ng-model="selectEle.ele.style.lineHeight">
                                       <option value="1">1倍</option>
                                       <option value="1.2">1.2倍</option>
                                       <option value="1.35">1.35倍</option>
                                       <option value="1.5">1.5倍</option>
                                       <option value="2">2倍</option>
                                       <option value="2.5">2.5倍</option>
                                    </select>                                   
        	 	 	  	   	   </div>
        	 	 	  	   </div>
                           <!--边框-->
                           <div class="col-xs-12" ng-if="selectEle.tagName=='text'">
                               <label class="col-xs-2">边框</label>
                               <div class="col-xs-10">
                                    <div class="col-xs-4 InputColorContent">
                                    <div type="text" class="form-control InputColor" ng-click="showBorderColorPanel()" style="background:{{selectEle.ele.style.borderColor}};"></div>
                                    <div class="colorPicker" ng-class="{'showColorPicker':showBorderColorPicker==true}">
                                        <div>
                                           <div style="background:{{color.color}}" ng-repeat="color in colors" ng-click="chooseBorderColor(color.color)">
                                              {{color.content}}
                                           </div>
                                        </div>
                                    </div>
                               </div>
                                    <div class="col-xs-4"> 
                                       <select ng-model="selectEle.ele.style.borderStyle">
                                           <option value="none">无</option>
                                           <option value="dotted">点状</option>
                                           <option value="solid">实线</option>
                                           <option value="double">双线</option>
                                           <option value="dashed">虚线</option>
                                        </select>     
                                    </div>
                                    <div class="col-xs-4">
                                       <input type="text" class="form-control" ng-model="selectEle.ele.style.borderWidth"/>
                                    </div>
                               </div>
                           </div>
        	 	 	  	   <!--透明-->
        	 	 	  	   <div class="col-xs-12">
        	 	 	  	   	   <label class="col-xs-2">透明</label>
        	 	 	  	   	   <div class="col-xs-6 sliderContent">
                                   <div slider type="opacity" class="line" style="left:{{selectEle.ele.style.opacity*120}};"></div>
                                   <div class="slider"></div>
                               </div>
        	 	 	  	   	   <div class="col-xs-4">
                                    <input type="text" class="form-control" ng-model="selectEle.ele.style.opacity"/>       
                               </div>
        	 	 	  	   </div>
        	 	 	  	   <!--阴影-->
        	 	 	  	   <div class="col-xs-12">
        	 	 	  	   	   <label class="col-xs-2">阴影</label>
                               <div class="col-xs-6 sliderContent">
                                   <div slider type="boxShadow" class="line" style="left:{{selectEle.ele.style.boxShadowWidth/100*120}};"></div>
                                   <div class="slider"></div>
                               </div>
                               <div class="col-xs-4">
                                    <input type="text" class="form-control" ng-model="selectEle.ele.style.boxShadowWidth"/>       
                               </div>
        	 	 	  	   </div>
        	 	 	  	   <!--圆角-->
        	 	 	  	   <div class="col-xs-12">
        	 	 	  	   	   <label class="col-xs-2">圆角</label>
                               <div class="col-xs-6 sliderContent">
                                   <div slider type="borderRadius" class="line" style="left:{{selectEle.ele.style.borderRadius/100*120}};"></div>
                                   <div class="slider"></div>
                               </div>
                               <div class="col-xs-4">
                                    <input type="text" class="form-control" ng-model="selectEle.ele.style.borderRadius"/>       
                               </div>
        	 	 	  	   </div>
        	 	 	  	   <!--旋转-->
        	 	 	  	   <div class="col-xs-12">
        	 	 	  	   	   <label class="col-xs-2">旋转</label>
                               <div class="col-xs-6 sliderContent">
                                   <div slider type="rotate" class="line" style="left:{{selectEle.ele.style.rotate/360*120}}";></div>
                                   <div class="slider"></div>
                               </div>
                               <div class="col-xs-4">
                                    <input type="text" class="form-control" ng-model="selectEle.ele.style.rotate"/>       
                               </div>
        	 	 	  	   </div>
        	 	 	  	   <!--对齐-->
        	 	 	  	   <div class="col-xs-12" ng-if="selectEle.tagName=='text'">
	        	 	 	  	   <label>对齐</label>
	        	 	 	  	   <div ng-click="setTextAlign($event)">
	        	 	 	  	   	   <div class="col-xs-3 textAlign" align="left" ng-class="{'textAlignSelected':selectEle.ele.style.textAlign == 'left'}">左对齐</div>
	        	 	 	  	   	   <div class="col-xs-3 textAlign" align="center" ng-class="{'textAlignSelected':selectEle.ele.style.textAlign == 'center'}">居中</div>
	        	 	 	  	   	   <div class="col-xs-3 textAlign" align="right" ng-class="{'textAlignSelected':selectEle.ele.style.textAlign == 'right'}">右对齐</div>
	        	 	 	  	   </div>
        	 	 	  	   </div>
        	 	 	  	   <!--位置-->
        	 	 	  	   <div class="col-xs-12">
        	 	 	  	   	   <label class="col-xs-2">位置</label>
        	 	 	  	   	   <label class="col-xs-1">X:</label>
        	 	 	  	   	   <div class="col-xs-3"><input style="width:50px" ng-model="selectEle.ele.style.left"></div>
        	 	 	  	   	   <label class="col-xs-1">Y:</label>
        	 	 	  	   	   <div class="col-xs-3"><input style="width:50px" ng-model="selectEle.ele.style.top"></div>
        	 	 	  	   </div>
                           <!-- 大小-->
                           <div class="col-xs-12">
                               <label class="col-xs-2">大小</label>
                               <label class="col-xs-2">宽度:</label>
                               <div class="col-xs-3"><input style="width:50px" ng-model="selectEle.ele.style.width"></div>
                               <label class="col-xs-2">高度:</label>
                               <div class="col-xs-3"><input style="width:50px" ng-model="selectEle.ele.style.height"></div>
                           </div>
            	 	 </div>

                     <div ng-if="editAttr=='action'" class="editPanel">
                            <!-- 速度 -->
                            <div class="col-xs-12">
                                <label class="col-xs-2">速度</label>
                                <div class="col-xs-6 sliderContent">
                                   <div slider type="animateTime" class="line" style="left:{{selectEle.ele.style.animateTime/10*120}};"></div>
                                   <div class="slider"></div>
                                </div>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" ng-model="selectEle.ele.style.animateTime"/>       
                                </div>
                            </div>
                            <!-- 延时-->
                            <div class="col-xs-12">
                                <label class="col-xs-2">延时</label>
                                <div class="col-xs-6 sliderContent">
                                   <div slider type="animateDelay" class="line" style="left:{{selectEle.ele.style.animateDelay/10*120}};"></div>
                                   <div class="slider"></div>
                                </div>
                                <div class="col-xs-4">
                                    <input type="text" class="form-control" ng-model="selectEle.ele.style.animateDelay"/>       
                                </div>
                            </div>
                            <!-- 动画 -->
                            <div class="col-xs-12">
                                <div class="col-xs-4 actionsView" ng-repeat="action in animateActions" ng-click="chooseAction(action)" ng-class="{actionsViewSelected:action.actionClass == selectEle.ele.entrance}">{{action.actionName}}</div> 
                            </div>
                     </div>
                     
                     
            	 </div>
            </div>
        </div>
    </div>
    
    <div id="pictureStore" ng-init="showPictureStroe=false" ng-if="showPictureStroe==true">
         <div class="top"></div>
         <div class="center">
            <div class="col-xs-1 cleft"></div>
            <div class="col-xs-11 cright">
                <div class="pic" ngf-select ngf-change="upload($files)">
                   <div class="addImg">+</div>
                   <div class="addFont">上传图片</div>
                </div>
                <div id="{{backimg.id}}" class="pic" ng-click="selectBackImg(backimg.img)" ng-repeat="backimg in backImgs" ng-class="{'picActive':backimg.img==selectBackImgSrc}">
                   <div class="imgWrap">
                       <img ng-class="{imgWidth:backimg.width/backimg.height > 1.75,imgHeight:backimg.width/backimg.height < 1.75}" ng-src="{{backimg.img}}"/>
                   </div>
                   <div class="imgName">
                      {{backimg.fileName}}
                   </div>
                </div>
            </div>
         </div>
         <div class="bottom">
            <button class="btn btn-sm btn-success" ngf-select ngf-change="upload($files)">上传图片</button>
            <button class="btn btn-sm btn-danger" ng-click="setBackImg()" ng-if="showPictureStroeFor=='backImg' || showPictureStroeFor=='all'">设为背景</button>
            <button class="btn btn-sm btn-danger" ng-click="changeImg()" ng-if="showPictureStroeFor=='eleImg'">更换图片</button>
            <button class="btn btn-sm btn-warning" ng-click="addImg()" ng-if="showPictureStroeFor=='all'">新增图片</button>
         </div>
   </div>  
   
    
    <jsp:include page="../common/commonScript.jsp"/> 
     
     <script>
         
         
	setCanvas();
	window.onresize = setCanvas;
	         function setCanvas(){
	         	 //获取中间页面高度
		         var centerHeight = $("body").height() - $("header").height();
		         //中间展板宽度
		         var centerWidth = $("#centerframe").get(0).offsetWidth;
		         
		         /* var canvasHeight = centerHeight*0.6;
		         var canvasWidth = canvasHeight*300/470; */
		         
		         var canvasWidth = centerWidth*0.4;
		         var canvasHeight = canvasWidth*470/300;
		         //画板自适应
		         $("#canvas").css({
		                width:canvasWidth,
		                height:canvasHeight,
		                top:1/2*(centerHeight-canvasHeight),
		                left:1/2*(centerWidth-canvasWidth)
		         });
		         
		         scale = canvasWidth/300;
		         $("#pageWrap").css("-webkit-transform","scale("+scale+","+scale+")");
		         if(canvasWidth > 300) {
		        	 $("#pageWrap").css({
		        		 "margin-left":1/2*(canvasWidth-300),
		        		 "margin-top":1/2*(canvasHeight-470)
		        	 });
		         }else {
		        	 $("#pageWrap").css({
		        		 "margin-left":-1/2*(300-canvasWidth),
		        		 "margin-top":-1/2*(470-canvasHeight)
		        	 });
		         }
		         
		       //画板所在屏幕中的位置
		       offsetLeft = $("#canvas")[0].offsetLeft + $("#leftframe").width();
			   offsetTop = $("#canvas")[0].offsetTop + $("header").height();
		         
	}

      $(document).ready(function(){
          $("div[edit]").one("webkitAnimationEnd",function(){
              $(this).removeClass();
          });
      });
     </script>
  </body>
</html>

